@import './variables.scss';
@import './mixin.scss';
// @import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-family: "PingFang SC", Helvetica, "Microsoft YaHei", STHeiti, Tahoma;
}

html {
    height: 100%;
    box-sizing: border-box;
}

#app {
    height: 100%;
}

@font-face {
    font-family: 'electronicFont';
    src: url("../assets/font/DS-DIGIT.TTF");
}

ol,
ul,
li {
    list-style: none;
}

ul {
    padding: 0;
    margin: 0
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

a:focus,
a:active {
    outline: none;
}

a,
a:focus,
a:hover {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}

div:focus {
    outline: none;
}

.fr {
    float: right;
}

.fl {
    float: left;
}

.block {
    display: block;
}

.pointer {
    cursor: pointer;
}

.fontWeight {
    font-weight: 600;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.text-overflow {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

//修改滚动条样式
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track-piece {
    background-color: rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 6px;
}

 ::-webkit-scrollbar-thumb:vertical {
    height: 5px;
    background-color: rgba(125, 125, 125, 0.5);
    -webkit-border-radius: 6px;
}

 ::-webkit-scrollbar-thumb:horizontal {
    width: 5px;
    background-color: rgba(125, 125, 125, 0.5);
    -webkit-border-radius: 6px;
}

.fillcontain {
    padding: 20px;
    box-sizing: border-box;
    background: #F7F7F8;
}

.searchArea {
    background: rgba(255, 255, 255, 1);
    border-radius: 2px;
    padding: 20px 20px 5px;
}

//对齐
@each $var in (left,
center,
right) {
    .text-#{$var} {
        text-align: $var !important;
    }
}

//flex
@each $key,
$value in $flex-jc {
    .jc-#{$key} {
        justify-content: $value;
    }
}

@each $key,
$value in $flex-ai {
    .ai-#{$key} {
        align-items: $value;
    }
}

//.mt-1 => margin top
//spacing
@each $typekey,
$type in $spacing-types {
    //.m-1 左右上下全
    @each $sizekey,
    $size in $spacing-sizes {
        .#{$typekey}-#{$sizekey} {
            #{$type}: $size * $spacing-base-size
        }
    }
    //.mx-1 .my-1 左右或上下
    @each $sizekey,
    $size in $spacing-sizes {
        .#{$typekey}x-#{$sizekey} {
            #{$type}-left: $size * $spacing-base-size;
            #{$type}-right: $size * $spacing-base-size;
        }
        .#{$typekey}y-#{$sizekey} {
            #{$type}-top: $size * $spacing-base-size;
            #{$type}-bottom: $size * $spacing-base-size;
        }
    }
    //.mt-1
    @each $directionkey,
    $direction in $spacing-directions {
        @each $sizekey,
        $size in $spacing-sizes {
            .#{$typekey}#{$directionkey}-#{$sizekey} {
                #{$type}-#{$direction}: $size * $spacing-base-size;
            }
        }
    }
    .#{$typekey} {
        #{$type}: 0;
    }
}

.crirle {
    display: inline-block;
    width: .1rem;
    height: .2rem;
    margin-right: .125rem;
    border-top-left-radius: .2rem .18rem;
    border-top-right-radius: .2rem .18rem;
    border-bottom-left-radius: .2rem .18rem;
    border-bottom-right-radius: .2rem .18rem;
}

.round {
    display: inline-block;
    width: .15rem;
    height: .15rem;
    border-radius: 50%;
    margin-right: .125rem;
}

.square {
    display: inline-block;
    width: .175rem;
    height: .175rem;
    margin-right: .1875rem;
}

.skyBlue {
    background: #006cff;
    box-shadow: 0 0 0.225rem #1e79f7;
}

.cyan {
    background: #6acca3;
    box-shadow: 0 0 0.225rem #8cf558;
}

.bgRed {
    background: #ed3f35;
    box-shadow: 0 0 0.225rem #f84940;
}

.shenlan {
    color: #4c9bfd;
}

.qianlan {
    color: #68d8fe;
}

.qingse {
    color: #01fff6;
}

.gray {
    color: #7BA1D2;
}

.colorRed {
    color: #e70837 !important;
}

.green {
    color: #6acca3;
}

.huise {
    color: #909399;
}